@import "~scss/variables";

$sw-page-smart-bar-border-color: $color-gray-300;
$sw-page-separator-color: $color-gray-300;
$sw-page-divider-background-color: $color-gray-300;
$sw-page-smart-bar-background-color: $color-white;
$sw-page-smart-bar-headline-color: $color-darkgray-200;
$sw-page-side-content-default-width: 440px;
$sw-page-smart-bar-headline-font-size: $font-size-m;
$sw-page-smart-bar-headline-font-weight: $font-weight-semi-bold;
$sw-page-search-bar-z-index: $z-index-sw-page-search-bar;

.sw-page {
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    grid-template-rows: 1fr;

    &.has--head-area {
        grid-template-rows: auto 1fr;
    }

    .sw-page__head-area {
        position: relative;
        display: grid;
        grid-column-gap: 8px;
        /* stylelint-disable-next-line max-line-length */
        grid-template-columns: [head-start back-btn-start] 1fr [back-btn-end header-content-start] minmax(0, $content-width) [header-content-end] 1fr [smart-bar-end];
        align-items: center;
        background: $sw-page-smart-bar-background-color;
        border-bottom: 2px solid $sw-page-smart-bar-border-color;
        z-index: $z-index-page-header;
    }

    .sw-page__search-bar {
        grid-row: 1;
        grid-column: header-content-start / header-content-end;
        z-index: $sw-page-search-bar-z-index;

        @media screen and (max-width: 500px) {
            grid-column: head-start / smart-bar-end;
        }
    }

    .sw-page__top-bar-actions {
        grid-row: 1;
        grid-column: header-content-end / smart-bar-end;
        padding-right: 32px;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
    }

    .sw-page__smart-bar-divider {
        position: absolute;
        top: 80px;
        width: 100%;
        height: 1px;
        background-color: $sw-page-divider-background-color;
    }

    .sw-page__back-btn-container {
        grid-column: back-btn-start / back-btn-end;
        grid-row: 2;
    }

    .smart-bar__back-btn {
        width: 54px;
        height: 24px;
        line-height: $line-height-md;
        display: grid;
        grid-template-columns: 30px 24px;
        align-items: center;
        margin-left: 20px;

        .mt-icon.icon--regular-chevron-left-s {
            line-height: $line-height-md;
            margin: auto;
        }
    }

    .smart-bar__content {
        min-height: 70px;
        max-width: $content-width;
        padding: 15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-column: header-content-start / header-content-end;

        @media screen and (max-width: 1360px) {
            padding: 15px;
        }
    }

    .smart-bar__header {
        flex: 1;
        min-width: 0;
    }

    .smart-bar__header h2 {
        color: $sw-page-smart-bar-headline-color;
        font-size: $sw-page-smart-bar-headline-font-size;
        font-weight: $sw-page-smart-bar-headline-font-weight;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0;

        .mt-icon {
            position: relative;
            top: -1px;

            &.icon--regular-chevron-right-xs {
                width: 10px;
                height: 10px;
            }
        }
    }

    .smart-bar__actions {
        display: flex;
        flex-direction: row;
        text-align: right;
        white-space: nowrap;
        align-items: center;

        .mt-button,
        .sw-button-group,
        .sw-tooltip--wrapper {
            margin-left: 8px;

            &:first-child {
                margin-left: 0;
            }
        }

        .sw-context-button__menu-position {
            margin-right: 0;
        }
    }

    .sw-page__smart-bar-amount {
        font-weight: normal;
    }

    .sw-page__content {
        position: relative;
        height: 100%;

        &.has--side-content {
            display: grid;
            grid-template-columns: $sw-page-side-content-default-width 1fr auto;
        }

        &.has--side-bar {
            display: grid;
            grid-template-columns: 1fr auto;
        }

        .content__wrapper {
            position: relative;
            width: 100%;
            height: 100%;
        }
    }

    .sw-page__main-content,
    .sw-page__side-content {
        position: relative;
        height: 100%;
    }

    .sw-page__main-content-inner,
    .sw-page__side-content-inner {
        position: absolute;
        overflow: auto;
        height: 100%;
        width: 100%;
    }

    .sw-page__side-content {
        border-right: 1px solid $sw-page-separator-color;
    }
}
